<template>
  <scroll-area>
    <q-page class="q-pa-md">
      <q-card class="my-card">
        <q-card-section>
          <q-table
            flat
            bordered
            hide-bottom
            :data="blogList"
            :columns="columns"
            row-key="id"
            selection="multiple"
            :selected.sync="selected"
          >
            <template v-slot:body-cell-actions="props">
              <q-td :props="props">
                <q-btn
                  v-if="hasPerm('blog/edit') || hasPerm('blog/*')"
                  color="primary"
                  :size="$btnSize"
                  icon="o_class"
                  round
                  dense
                  flat
                  @click="addCourse(props)"
                >
                  <q-tooltip> 新增课程 </q-tooltip>
                </q-btn>
                <q-btn
                  v-if="hasPerm('blog/edit') || hasPerm('blog/*')"
                  color="primary"
                  :size="$btnSize"
                  icon="o_edit"
                  round
                  dense
                  flat
                  @click="edit(props)"
                >
                  <q-tooltip> 编辑 </q-tooltip>
                </q-btn>
                <q-btn
                  v-if="hasPerm('blog/delete') || hasPerm('blog/*')"
                  color="warning"
                  :size="$btnSize"
                  icon="o_delete"
                  round
                  dense
                  flat
                  @click="delHandler(props.row)"
                >
                  <q-tooltip> 删除 </q-tooltip>
                </q-btn>
              </q-td>
            </template></q-table
          >

          <pagination
            :pagination="pagination"
            :pages-number="pagesNumber"
            @changePage="changePage"
            @changeRowsPerPage="changeRowsPerPage"
          ></pagination>
        </q-card-section>
      </q-card>
    </q-page>
  </scroll-area>
</template>

<script>
import ScrollArea from "@componets/scrollarea/ScrollArea";
import Pagination from "@componets/pagination/Pagination";
import * as studentApi from "@/demo/api/student";

export default {
  props: {
    columns: {
      type: Array,
      default: () => [
        {
          name: "studentName",
          field: "studentName",
          label: "学生姓名",
          align: "left",
          headerStyle: "",
          sortable: true,
        },
        {
          name: "studentClass",
          field: "studentClass",
          label: "学生班级",
          align: "left",
          headerStyle: "",
          sortable: true,
        },
        {
          name: "actions",
          field: "actions",
          label: "操作",
          align: "center",
          headerStyle: "width: 160px;",
        },
      ],
    },
  },
  components: {
    ScrollArea,
    Pagination
  },
  data() {
    return {
      blogList: [],
      pagination: {
        sortBy: "desc",
        descending: false,
        page: 1,
        rowsPerPage: 10,
      },
      pagesNumber: 100,
      selected: [],
    };
  },
  created() {
    this.executeQueryPage();
  },
  methods: {
    executeQueryPage() {
      const params = {
        filters: {},
        page: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        sorts: [{ fieldName: "studentName", direction: "asc" }],
      };
      studentApi.queryPageStudents(params).then((data) => {
        this.blogList = data.list;
        this.pagesNumber = data.total;
      });
    },
  },
};
</script>

<style>
</style>